<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.test{
				margin: 30px auto;
				position: relative;
				width:100px;
				height: 200px;
				/*transform-origin: left;*/
			}
			img{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="test">
			<img src="../images/canvas/zi1.png"/>
			<img src="../images/index_hongbao.png"/>
		</div>
		<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/TweenMax.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var t = new TimelineMax()
			t.to(".test",1,{
				rotationY:90,
				onComplete:function(){
					//alert($("img").eq(0))
					$(".test img").eq(1).css("display","none");
				}
			});
			t.set($(".test img").eq(0),{
				rotationY:180
			})
			t.to(".test",1,{
				rotationY:180
			})
		</script>
	</body>
</html>
